// 商品详情
<template >
  <div class="details" v-if="goodsDetails.slogan !== null">
    <!-- 导航栏 -->
    <van-nav-bar left-arrow @click-left="back">
      <van-icon name="ellipsis" slot="right" />
      <div slot="title">商品</div>
    </van-nav-bar>
    <!-- 轮播图 -->
    <van-swipe @change="onChange">
      <van-swipe-item v-for="(item,index) in lunboList" :key="index">
        <van-image :src="item" @click="swiperImgClick()" />
      </van-swipe-item>
      <!-- 小数显示 -->
      <div class="custom-indicator" slot="indicator">{{ current + 1 }} / {{lunboList.length}}</div>
    </van-swipe>

    <!-- 商品名称价格..。 -->
    <van-cell-group>
      <van-cell>
        <!-- 标题 -->
        <div class="goods-title">
          <!-- 分享 -->
          <div class="share-profit" id="share">
            <em class="ic-share"></em>
            <span class="txt-share">分享</span>
          </div>
          <div class="title_content ellipsis_two">
            <p class="tag"></p>
            <h1 class="title_text">{{goodsDetails.title}}</h1>
          </div>

          <!-- 广告语 -->
          <div class="desc_text ellipsis_two" v-if="goodsDetails.slogan">
            <p>
              {{goodsDetails.slogan}}
              <!-- <a
                href="javascript:;"
              >【电视放肆购】</a>-->
            </p>
          </div>
        </div>
        <!-- 价格展示 -->
        <div class="goods-price">
          <p>
            <span>￥</span>
            <span style="font-size: 1.5rem;">{{goodsDetails.price}}</span>
            <span>.00</span>
          </p>
        </div>
      </van-cell>
      <!-- 分期 -->
      <van-cell class="fenqi" title="易卡分期" is-link @click="showPopup">【易卡分期支付】0首付 30天免息 0利息</van-cell>

      <!-- 点击易卡分期弹出 -->
      <van-popup v-model="Fqshow" closeable round close-icon-position="top-right">
        <h1 style="font-size: 1.35rem;color: rgb(0, 5, 10);margin-bottom: 1rem;">使用app分期购买</h1>
        <van-image width="200" height="200" :src="fqImg" />
        <p>扫一扫，开启美好之旅</p>
      </van-popup>

      <!-- 优惠券 -->
      <van-cell class="fenqi" title="已领券" is-link>
        <div class="liJi">
          <!-- <div class="coupon_bg"></div> -->
          <div class="coupon_text">立减可用</div>
        </div>
      </van-cell>
    </van-cell-group>

    <!-- 规格 -->
    <!-- <van-cell-group class="standard">
      <van-cell title="规格" class="fenqi">
        <div class="specification_cont swiper-wrapper swiper-wrap" style="height: auto;">
          <div class="swiper-slide detail_item swiper-slide-active" style="width: 76.1905px;">
            <div class="icon-box">
              <span>
                <img
                  style="display: block;width: 100%;"
                  src="//gfs.gomein.net.cn/T1EBCXBbJT1RCvBVdK.png?v=2"
                />
              </span>
            </div>
            <div class="name_box ellipsis_line">
              <span>产品类型</span>
            </div>
            <div class="detail_info ellipsis_line">
              <span>4K超清电视</span>
            </div>
          </div>
          <div class="swiper-slide detail_item swiper-slide-next" style="width: 76.1905px;">
            <div class="icon-box">
              <span>
                <img
                  style="display: block;width: 100%;"
                  src="//gfs4.gomein.net.cn/T1fsbXBCET1RCvBVdK.png?v=2"
                />
              </span>
            </div>
            <div class="name_box ellipsis_line">
              <span>屏幕尺寸</span>
            </div>
            <div class="detail_info ellipsis_line">
              <span>55</span>
            </div>
          </div>
          <div class="swiper-slide detail_item" style="width: 76.1905px;">
            <div class="icon-box">
              <span>
                <img
                  style="display: block;width: 100%;"
                  src="//gfs1.gomein.net.cn/T1yqdXB7Dv1RCvBVdK.png?v=2"
                />
              </span>
            </div>
            <div class="name_box ellipsis_line">
              <span>屏幕分辨率</span>
            </div>
            <div class="detail_info ellipsis_line">
              <span>超高清4K（3840*2160）</span>
            </div>
          </div>
        </div>
      </van-cell>
    </van-cell-group>-->

    <!-- 增值服务 -->
    <van-cell-group>
      <van-cell title="已选推荐" value="增值服务" is-link @click="showZezhClick" />

      <van-popup
      class="zzfuwu"
        v-model="showZeZh"
        position="right"
        closeable
        :style="{ height: '100%', width: '85%' }"
      >
        <div class="product_info">
          <div class="img_box">
            <img :src="goodsDetails.image" alt />
          </div>
          <div class="info_box">
            <p class="price">￥{{goodsDetails.price}}</p>
            <p class="purchase">限购99件</p>
          </div>
        </div>
        <div class="product_num">
          <p class="num_label">数量</p>
          <van-stepper @change="step(goodsDetails.num,goodsDetails.id)" v-model="goodsDetails.num" max="99" />
        </div>
        <div class="format_size">
          <div>增值服务</div>
          <div style="margin-bottom: .75rem;">
            <img style="margin-right: 1rem;" src="../assets/image/wxy-image/timeImg.png" alt="">
            <span>延长保</span>
          </div>
          <div class="baoxiu">
            <p>只换不修1年</p>
            <p>免费</p>
          </div>
        </div>

        <van-goods-action>
  <van-goods-action-button type="warning" text="加入购物车" @click="joinCart" />
  <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
      </van-popup>
    </van-cell-group>

    <!-- 送至地点 -->
    <van-cell-group class="sendTo">
      <!-- 配送至 -->
      <van-cell class="fenqi" title="送至" is-link>
        <span class="hei">朝外街道，免运费，</span>
        明日01:00:00前完成下单，预计周五（11月22日）送达
      </van-cell>
      <!-- 服务说明 -->
      <van-cell class="bgc">
        <ul class="sendExplain" style="display:block;" loop="list">
          <li class>
            <span>支持15天无理由退货</span>
          </li>
          <li class>
            <span>包邮</span>
          </li>
        </ul>
      </van-cell>
    </van-cell-group>

    <!-- 询导购 -->
    <van-cell-group>
      <van-cell title="朝阳区门店">
        <div>北京国美西坝河店</div>
      </van-cell>
      <a
        href="https://item.m.gome.com.cn/staff_info.html?guideNo=00125758&stid=A007&storeCode=A007"
      >
        <img style="width:100%" src="../assets/image/wxy-image/dao_gouy.png" />
      </a>
      <!-- <van-cell title="单元格" value="内容" label="描述信息" /> -->
    </van-cell-group>

    <!-- 服务模板 -->
    <van-cell-group class="serveF">
      <van-cell>
        <div class="serve_wrap">
          <!-- 有几项显示几个li -->
          <ul class="flexbox swiper-wrapper" id="feature_html">
            <li class="flex1 flexbox v_center">
              <a href="javascript:;">
                <p class="title">
                  <span class="icon change_icon"></span>以旧换新
                </p>
                <span>大家电以旧换新</span>
              </a>
            </li>

            <li class="flex1 flexbox v_center">
              <a href="javascript:;">
                <p class="title">
                  <span class="icon yanbao_icon"></span>可选增值服务
                </p>
                <span>为商品保价护航</span>
              </a>
            </li>
          </ul>
        </div>
      </van-cell>
    </van-cell-group>

    <!-- cc -->
    <div style="height:100px"></div>

    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-icon icon="like-o" text="收藏" info />
      <van-goods-action-icon icon="cart-o" text="购物车" to="/shopc" :info="cartNum" />
      <van-goods-action-button type="warning" text="加入购物车" @click="joinCart" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
  <div v-else style="text-align: center">
    <h1 style="font-size: 4rem;">查找不到数据</h1>
  </div>
</template>

<script>
import fqImg from '../assets/image/wxy-image/createIOUQRCode.png'
import { ImagePreview } from 'vant'
export default {
  data () {
    return {
      current: 0,
      Fqshow: false,
      showZeZh: false,
      // 商品信息
      goodsDetails: [],
      // 轮播图数组
      lunboList: [],
      // app二维码
      fqImg: fqImg,
      // 购物车数量
      cartNum: 0
    }
  },
  methods: {
    // 商品数量步进器
    step (num, id) {
      this.$http.post('/goods_step', { num: num, id: id })
      // this.cg()
    },
    swiperImgClick () {
      ImagePreview(this.lunboList)
    },
    // 返回上一级
    back () {
      this.$router.go(-1)
    },
    // 轮播图数字
    onChange (index) {
      this.current = index
    },
    // 弹框易卡分期
    showPopup () {
      this.Fqshow = true
    },
    // 弹框
    showZezhClick () {
      this.showZeZh = true
    },
    // 加入购物车
    joinCart () {
      this.$http
        .get(`/showCart/${localStorage.getItem('goodsID')}`)
        .then(res => {
          // console.log(res.data.data)
          // 判断购物车是否有该商品
          // 如果没有 就直接把该商品加入购物车
          if (res.data.code === 401) {
            this.$http
              .post('/goods_details/join-cart', {
                goods_id: localStorage.getItem('goodsID'),
                num: this.goodsDetails.num,
                user_id: sessionStorage.getItem('userid'),
                price: this.goodsDetails.price,
                goods_name: this.goodsDetails.goods_name
              })
              .then(res => {
                // 成功时提示
                if (res.data.code === 200) {
                  this.$toast('加入购物车成功')
                }
              })
          } else {
            this.$toast('加入购物车成功')
          }
        })
    }
  },
  created () {
    // console.log(this.product_num)

    // 获取商品信息
    this.$http
      .get(`/goods_details/${localStorage.getItem('goodsID')}`)
      .then(res => {
        this.goodsDetails = res.data.data[0]
        // console.log(this.goodsDetails)
        // 轮播图 字符串转数组
        this.lunboList = res.data.data[0].lbImages.split(',')
      })

    // 获取购物车里的商品数量
    this.$http.get('/goods_cart').then(res => {
      this.cartNum = res.data.data.length
    })
  },
  watch: {
  //   cartNum: function (val) {
  //     console.log(document.querySelector('.van-info'))
  //     document.querySelector('.van-info').classList.add('eanum')
  //     console.log(document.querySelector('.van-info').className)
  //   }
  }
}
</script>

<style scoped lang="less">
body {
  background-color: #fff;
}

.details {
  background-color: #fff;
  .van-info {
    width: 30px !important;
  }
  .eanum {
    display: inline;
    min-width: 30px !important;
  }
  .van-icon {
    color: #969799;
    font-size: 1.4rem;
    cursor: pointer;
  }

  .van-tab--active {
    color: #f20c59;
  }

  .van-tabs__line {
    background-color: #f20c59;
  }

  .van-swipe-item {
    text-align: center;
  }

  .van-image {
    width: 80%;
  }

  .custom-indicator {
    position: absolute;
    right: 3rem;
    bottom: 1rem;
    background: rgba(51, 51, 51, 0.5);
    border-radius: 16px;
    width: 2.75rem;
    text-align: center;
    color: #fff;
    font-size: 0.875rem;
  }
  // 标题
  .goods-title {
    margin-bottom: 0.3rem;
    line-height: 1.25rem;
    font-size: 1rem;
    color: #333;
    position: relative;
    font-weight: 400 !important;

    .title_content {
      padding-right: 0.3rem;
    }

    .tag {
      display: inline-block;
      background: url("../assets/image/wxy-image/ziying_red.4a81539885.png")
        no-repeat;
      background-size: contain;
      width: 1.6rem;
      height: 0.7rem;
    }

    h1.title_text {
      display: inline;
      word-break: break-all;
    }
  }
  // 分享
  .share-profit {
    float: right;
    padding-left: 0.7rem;
    text-align: center;
    border-left: 1px solid #e6e6e6;

    .ic-share {
      display: inline-block;
      background: url("../assets/image/wxy-image/ic_share.6dfd1e0792.png")
        no-repeat;
      background-size: 1.2rem 1.2rem;
      width: 1.2rem;
      height: 1.2rem;
    }

    .txt-share {
      display: block;
      margin-top: 0.2rem;
      font-size: 0.8rem;
      line-height: 1;
      width: 2rem;
    }
  }

  .desc_text {
    margin-bottom: 0.2rem;
    word-break: break-all;
    font-size: 0.66rem;
    color: #f20c59;
    line-height: 1rem;
  }

  .goods-price {
    color: #f20c59;
    height: 1.5rem;
    font-size: 0.9rem;
    font-weight: 700;
  }

  .fenqi .van-cell__title {
    flex: none;
  }

  .fenqi .van-cell__value {
    font-size: 0.8125rem;
  }

  .fenqi .liJi {
    text-align: left;
    margin-left: 1rem;

    .coupon_text {
      color: #f20c59;
    }
  }

  .van-popup {
    text-align: center;
    padding: 2.75rem;
  }

  .swiper-wrapper {
    display: -webkit-flex;
  }

  .specification_cont .detail_item:last-child {
    border-right: none;
  }

  .specification_cont .detail_item {
    // padding: 0 .55rem;
    text-align: center;
    width: 22%;
    box-sizing: border-box;
    border-right: 1px solid #e6e6e6;

    .detail_info {
      font-size: 0.75rem;
      color: #919599;
      line-height: 1.3;
    }

    .icon-box {
      width: 1rem;
      height: 1rem;
      margin: 0 auto 0.6rem;
    }

    .ellipsis_line {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .name_box {
      color: #00050a;
      // font-size: 1.2rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.3;
    }
  }

  .standard .van-cell__value {
    margin-left: 0.75rem;
  }

  .standard,
  .sendTo,
  .serveF {
    border-top: 0.6rem solid #eee;
    border-bottom: 0.6rem solid #eee;
  }

  .sendTo .van-cell__value {
    text-align: left;
    margin-left: 0.75rem;
  }

  .sendTo {
    ul li {
      line-height: 0.75rem;
      float: left;
      background: url("../assets/image/wxy-image/icon1.f7bb838f89.png") center
        left no-repeat;
      background-size: 0.75rem 0.75rem;
      margin-right: 1rem;
      padding-left: 1.6rem;
      font-size: 0.75rem;
      color: #a2a4a6;
    }
  }

  .hei {
    color: #333;
  }

  .bgc {
    background-color: #fafafa;
  }

  .flexbox {
    display: -webkit-box;
  }

  .serve_wrap ul li:last-child {
    border-right: none;
  }

  .serve_wrap ul li {
    // height: 2.25rem;
    text-align: center;
    box-sizing: border-box;
    border-right: 1px solid #e6e6e6;

    a {
      display: block;
      width: 100%;
      position: relative;
    }

    .title {
      font-size: 0.9rem;
      color: #333;
      height: 1rem;
      margin-bottom: 0.6rem;
      text-align: center !important;
      font-weight: 400;
    }

    a > span {
      color: #a2a4a6;
      font-size: 0.8rem;
    }

    .icon {
      // margin-right: 0.4rem;
      display: inline-block;
      width: 1.2rem;
      height: 1.2rem;
      vertical-align: text-top;
    }
    .change_icon {
      background: url("../assets/image/wxy-image/icon_huan_xiangqing.89554e68a8.png")
        no-repeat;
      background-size: 1.2rem 1.2rem;
    }
    .yanbao_icon {
      // margin-top: 2px;
      // width: 1.2rem;
      background: url("../assets/image/wxy-image/add_service@2x.b35d5167f5.png")
        no-repeat;
      background-size: 1rem 1rem;
    }
  }

  .zzfuwu {
    padding: 0;
  }

  .product_info {
    padding: 0.2rem 0.6rem;
    border-bottom: 1px solid #e6e6e6;
    display: -webkit-box;

    .info_box {
      // padding-top: 1rem;
      color: #f20c59;
      font-size: 1.3rem;
      display: block;
      flex: 1;
      padding: 0.625rem;

      .price,
      .purchase {
        margin-bottom: 0.6rem;
        font-size: 1rem;
        text-align: left;
      }
    }

    .img_box {
      width: 5.1rem;
      height: 5.1rem;
      margin-right: 0.6875rem;
      border: 1px solid #e6e6e6;
      box-sizing: border-box;
      background-size: 100% 100%;

      img {
        width: 5rem;
        height: 5rem;
      }
    }
  }

  .product_num {
    margin-bottom: .5rem;
    padding: 0.6875rem .6875rem;
    display: -webkit-box;
    border-bottom: 1px solid #e6e6e6;

    .num_label {
      // display: flex;
      width: 2rem;
    }

    .van-stepper {
      margin-left: 2rem;
    }
  }

  .format_size {
    text-align: left;
    line-height: 1.8rem;
    padding-left: 1rem;
    zoom: 1;
    margin-bottom: .5rem;
    font-size: 1rem;

    .baoxiu {
      border: 1px solid #d2d2d2;
      text-align: center;
      width: 10.375rem;
      font-size: .825rem;
      line-height: 1rem;
      padding: .5rem 0;
    }
  }
}

.flex1,
.flexitem {
  display: block;
  -webkit-box-flex: 1;
}

.goods-title {
  text-align: left;
  font-weight: bold;
}

.ellipsis_two {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
